Promise
- 자바스크립트는 동기적으로 실행된다. 하나의 실행이 끝나야 다음 코드를 실행한다는 것이다.
- 한편, Promise는 비동기로 실행된다. 코드를 연속으로 처리하지 않고 중간에 흐름을 끊고, 다시 처리할 순간이 되면, 다음 코드를 처리한다.(마치 process의 blocked된 process와 같다.)
- DOM 스펙에서 JS 스펙이 되었다.
Promise 실행 처리 흐름
const obj = new Promise(resolve, reject) => {
resolve()
console.log("promise")
}
obj.then((value)=>{
console.log("성공")
},(reason)=>{
console.log("실패")
})
console.log("finsiehd")
출력 순서는 다음과 같다.
- "promise"
- "finsiehd"
- "성공"
실행 흐름
-
new Promise()를 실행한다.- 파라미터 함수를 실행하게 된다.
resolve()는 호출하지 않는다.console.log("promise")를 실행한다.
-
생성된 Promise Object를
obj에 할당한다. -
obj.then()은 실행하지 않는다. -
console.log("finished")를 실행한다. -
resolve()가 실행된다- 따라서
then()의 첫 번째 파라미터 함수가 호출되면서,console.log("성공")이 실행된다. - 만약, reject()가 호출되었으면, then의 두 번째 파라미터 함수가 호출되었을 것이다.
- 따라서
Promise의 상태
상태는 세 가지이며, 한 순간에는 하나의 상태만 가질 수 있다.
pendingnew Promise()로 인스턴스를 생성하는 상태다. Promise 생성자의 파라미터 함수가 실행되고 있을 때도 pending 상태다settledpending이 종료된 상태를 나타내며, 성공과 실패를 나타내는 상태 두 개가 존재한다.
다시 실행 할 수 있는 상태가 되었을 때 resolve()가 호출된다. 이때, resolve는 .then을 호출하는 것과 같다. then()은 Promise의 상태가 fullfilled 이면 첫 번째 파라미터 함수(핸들러)를 호출하고, Promise의 상태가 rejected면 두 번째 파라미터 함수(핸들러)를 호출하게 된다
new Promise(executer function)
executer function 실행자 함수
function(resolve, reject){...}- resolve와 reject는 각각 함수 이름를 의미한다. resolve는 Promise가 성공적으로 완료되었을 때 실행되는 함수이며, reject는 Promise 수행 중 에러가 발생했을 때 실행되는 함수다.
{...}에는 실행자 코드를 작성한다.
const obj = new Promise((resolve, reject) => {
resolve("성공");
reject("실패");
});
- Promise 인스턴스를 생성하여 obj에 할당한다.
- resolve와 reject 이름의 function Object를 생성하고 Promise 인스턴스에 설정한다.
- 다른 모든 코드가 실행 된 후, 실행자 코드가 성공적이면 resolve를 호출하고, 반대인 경우에는 reject를 호출한다.(Promise는 흐름이 끊기고 나중에 실행되기 때문에 비동기 처리라고 한다.)
Promise Chain, Deferred Action
.then()과 같은 로직을 Promise Chain 혹은 Deferred Action 이라고 부른다.
const obj = new Promise((resolve, reject) => {
resolve("성공");
reject("실패");
});
obj.then(
(value) => {
console.log(value);
},
(reason) => {
console.log(value);
}
);
console.log("finished");
.then()과 같은 deferred Action은 실행되지 않고, 전체 코드가 끝난 후, 실행자가 deferred Action 을 호출하면 동작하게 된다.- 전체 코드 실행이 끝나면, Promise 인스턴스는 자신의 상태가 fullfilled면
resolve("성공")를 호출하고, 상태가 rejected면reject("실패")을 호출하게 된다. resolve("성공")이 호출되면,"성공"이 then의 value에 설정되고,reject("실패")가 호출되면"실패"가 then의 reason에 설정된다.- 엔진은 Promise 상태가 fullfilled면 then의 첫 번째 핸들러를 호출한다. 상태가 rejected면 then의 두 번째 핸들러를 호출한다.
